import Taro from '@tarojs/taro';
import {Image, View, Text, ScrollView} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {AtTabs, AtTabsPane} from 'taro-ui';
import {request, unite} from '../../../utils/index';
import Head from "../../../asset/images/head.png";
import './myTake.scss';
import none from "../../../asset/images/none.png";
import Xinxin from "../../../asset/images/xinxin.png";
import Shop from "../../../asset/shop/shop.png";
import CanIn from "../../../asset/images/can_in.png";
import Can from "../../../asset/images/can.png";

const topName = ['动态', '课程', '教练', '教室'];

class MyTake extends Taro.Component {
    config = {
        navigationBarTitleText: '我的收藏',
        backgroundColor: '#fff',
    };

    state = {
        typeIx: 0, //0课程 1教练 2教室
        listData: [], //列表信息
    };

    componentDidShow() {
        this.init();
    }

    //切换
    setTypeIx = (ix) => {
        this.setState({
            typeIx: ix
        }, () => {
            this.init();
        })
    };

    init = () => {
        const {typeIx} = this.state;
        //0动态 1课程 2教练 3教室
        if (typeIx == 0) { //动态
            this.trendsList();
        } else if (typeIx == 1) { //课程
            this.courseList();
        } else if(typeIx == 2) { //教练
            this.trainList();
        } else if(typeIx == 3){ //教室
            this.classroomList();
        }
    };

    //动态列表
    trendsList = () => {
        const params = {
            url: '/wx/collection/listMomments',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            listData: res.data,
                        })
                    }
                }
            }
        })
    };

    //1教练列表
    trainList = () => {
        const params = {
            url: '/wx/collection/listCoachs',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            listData: res.data,
                        })
                    }
                }
            }
        })
    };

    //跳转教练详情
    skipTrainDetail = (id) => {
        Taro.navigateTo({
            url: '../../index/train-detail/trainDetail?id=' + id
        })
    };

    //2教室列表
    classroomList = () => {
        const params = {
            url: '/wx/collection/listRooms',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            listData: res.data,
                        })
                    }
                }
            }
        })
    };

    //跳转教室详情
    skipDetail = (id) => {
        Taro.navigateTo({
            url: `../../index/classroom-detail/classroomDetail?id=${id}`
        })
    };

    //0课程列表
    courseList = () => {
        const params = {
            url: '/wx/collection/listClass',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            listData: res.data,
                        })
                    }
                }
            }
        })
    };

    //跳转课程详情
    skipCourseDetail = (classId, dispatchId) => {
        Taro.navigateTo({
            url: '../../index/course-detail/courseDetail?classId=' + classId + '&dispatchId=' + dispatchId,
        })
    };

    tabsClick = (is) => {
        this.setState({
            typeIx: is
        }, () => {
            this.init();
        })
    };

    //跳转详情页
    skipDetails = (id, dtId) => {
        //id 课程id dtId 动态id
        Taro.navigateTo({
            url: `../../home/detail/detail?id=${id}&dtId=${dtId}`
        })
    };

    render() {
        const {typeIx, listData} = this.state;
        return (
            <View className="page">
                <View className="take-wrap-top">
                    {topName.map((item, index) => (
                        <View className="take-top-item" key={index} onClick={this.setTypeIx.bind(this, index)}>
                            <View className={`text ${typeIx == index ? 'texts' : ''}`}>{item}</View>
                            {typeIx == index &&(
                                <View className="text-active"></View>
                            )}
                        </View>
                    ))}
                </View>
                <AtTabs className="com-tabs" current={typeIx} tabList={topName} onClick={this.tabsClick.bind(this)}>
                    {topName.map((va, ixs) => (
                        <AtTabsPane current={typeIx} key={ixs} index={ixs+1} >
                            <ScrollView
                                className="content-view"
                                scrollY
                            >
                                <View className="take-content-wrap">
                                    {/*//0动态 1课程 2教练 3教室*/}
                                    {typeIx == 2 &&(
                                        <View className="keep-content-coach">
                                            {listData && listData.map((item, index) => (
                                                <View className="keep-content-lists"  key={index} onClick={this.skipTrainDetail.bind(this, item.coachId)}>
                                                    <Image className="content-list-img" src={item.avatar} mode="widthFix"/>
                                                    <View className="content-list-wraps">
                                                        <View className="coach-name">{item.coachName}</View>
                                                        <View className="coach-title text-overflow">{item.description}</View>
                                                        <View className="coach-price flex-l">
                                                            <View className="num">¥{item.price}</View>
                                                            <View>/课时 </View>
                                                            {/*<View className="line_m">¥188</View>*/}
                                                        </View>
                                                    </View>
                                                </View>
                                            ))}
                                        </View>
                                    )}
                                    {typeIx == 3 &&(
                                        <View>
                                            {listData && listData.map((item, index) => (
                                                <View className="keep-head" key={index}>
                                                    <View className="classroom-wrap" onClick={this.skipDetail.bind(this, item.roomId)}>
                                                        <Image className="keep-head-img" src={item.avatar || Head}/>
                                                        <View className="classroom-name"><Text>{item.roomName || '暂无名称'}</Text></View>
                                                        <View className="classroom-address">{item.address}</View>
                                                        {/*<View className="classroom-btn" >查看</View>*/}
                                                    </View>
                                                </View>
                                            ))}
                                        </View>
                                    )}
                                    {typeIx == 1 &&(
                                        <View>
                                            {listData && listData.map((item, index) => (
                                                <View key={index}>
                                                    {item.hotClasses && item.hotClasses.map((value, is) => (
                                                        <View className="keep-content-list-item" key={is} onClick={this.skipCourseDetail.bind(this, value.classId, value.dispatchId, value.reservedStatus)}>
                                                            <Image className="list-img" src={value.avatar}/>
                                                            <View className="list-centent-left-wrap">
                                                                <View className="list-centent">
                                                                    <View className="name">{value.className}</View>
                                                                    <View className="timer">{value.classBeginTime}-{value.classEndTime} <Text className="text">￥{value.price}/节</Text></View>
                                                                    <View className="type flex-l">
                                                                        {value.labelNames.map((items, indexs) => (
                                                                            <View className="kepp-gg flex-center" key={indexs}>{items}</View>
                                                                        ))}
                                                                    </View>
                                                                </View>
                                                                <View className={`list-right-bt ${value.reservedStatus == 0 ? '' : 'list-right-bt-ym'}`}>{value.reservedStatus == 0 ? '预约' : '已约满'}</View>
                                                            </View>
                                                        </View>
                                                    ))}
                                                </View>
                                            ))}
                                        </View>
                                    )}
                                    {typeIx == 0 &&(
                                        <View className="home-list-content flex-lr">
                                            {listData && listData.map((item, index) => (
                                                <View className="home-list home-list-next" key={index} onClick={this.skipDetails.bind(this, item.dispatchId, item.momentId)}>
                                                    <View>
                                                        <View className="img-ck">
                                                            <Image className="imgs" src={item.imgs[0].imgUrl} mode="aspectFill"/>
                                                        </View>
                                                        <View className="home-details">
                                                            <View className="home-name text-overflow-two">{item.title}</View>
                                                            <View className="flex-lr detail-title">
                                                                <View className="flex-l">
                                                                    <Image className="heads" src={item.authorAvatar}/>
                                                                    <View className="text-name text-overflow">{item.authorName}</View>
                                                                </View>
                                                                <View className="flex-r" onClick={this.isShouc.bind(this, item.isLike, item.momentId, index)}>
                                                                    <Image className="cans" src={item.isLike == 1 ? CanIn : Can} mode="aspectFit"/>
                                                                    <View>{item.likeCount}</View>
                                                                </View>
                                                            </View>
                                                        </View>
                                                    </View>
                                                </View>
                                            ))}
                                        </View>
                                    )}
                                    {listData && listData.length == 0 &&(
                                        <View className="none">
                                            <Image src={none}/>
                                            <View>暂无收藏</View>
                                        </View>
                                    )}
                                </View>
                            </ScrollView>
                        </AtTabsPane>
                    ))}
                </AtTabs>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyTake);



